<template>
	<!-- 用v-show替代v-if，避免DOM频繁创建销毁 -->
		<view
			class="dropdown-menu"
			v-show="show"
			:style="{
				top: menuTop + 'px',
				left: menuLeft + 'px',
				visibility: isCalculated ? 'visible' : 'hidden' // 计算完成前隐藏
			}"
		>
			<!-- 箭头 -->
			<view class="arrow" :class="direction"></view>

			<!-- 菜单内容（添加ref用于获取实际高度） -->
			<view class="menu-content" ref="menuContent">
				<view class="" v-for="(opt, idx) in options" :key="idx" @click="handleSelect(opt.value)">
					<view class="menu-item" v-if="opt.isshow">
						<image v-if="opt.icon" :src="opt.icon" mode="widthFix"></image>
						<view class="texts">{{ opt.label }}</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="btn_pop" v-show="show">
	</view> -->
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		options: {
			type: Array,
			default: () => []
		},
		trigger: {
			type: Object,
			default: () => ({ top: 0, left: 0, height: 0 })
		}
	},
	data() {
		return {
			menuTop: 0,
			menuLeft: 0,
			direction: 'down', // up/down
			isCalculated: false // 标记位置是否计算完成（解决闪烁）
		};
	},
	watch: {
		// 监听show变化，显示时计算位置
		show(newVal) {
			if (newVal) {
				// 等待DOM更新后计算（确保menuContent已渲染）
				this.$nextTick(() => {
					this.calculatePosition();
				});
			} else {
				// 隐藏时重置状态，避免下次显示残留
				this.isCalculated = false;
			}
		},
		// 触发元素位置变化时重新计算
		trigger: {
			deep: true,
			handler() {
				if (this.show) {
					this.calculatePosition();
				}
			}
		}
	},
	methods: {
		// 计算菜单位置（核心优化）
		calculatePosition() {
			// 重置状态（先隐藏）
			this.isCalculated = false;

			// 获取窗口高度和菜单实际高度
			const { windowHeight } = uni.getSystemInfoSync();
			const query = uni.createSelectorQuery().in(this);

			query
				.select('.menu-content')
				.boundingClientRect((res) => {
					if (!res) {
						this.isCalculated = true;
						return;
					}
					const menuHeight = res.height; // 实际渲染高度（解决偏差）
					const triggerBottom = this.trigger.top + this.trigger.height; // 触发元素底部坐标
					const spaceBelow = windowHeight - triggerBottom; // 下方可用空间
					// 判断展开方向
					if (spaceBelow >= menuHeight) {
						// 向下展开：菜单顶部对齐触发元素底部
						this.direction = 'down';
						this.menuTop = triggerBottom - 12;
					} else {
						// 向上展开：菜单底部对齐触发元素顶部
						this.direction = 'up';
						this.menuTop = this.trigger.top - menuHeight - 12;
					}
					// 水平位置对齐（可根据需要微调）
					this.menuLeft = this.trigger.left - 12;

					// 计算完成，显示菜单（解决闪烁）
					this.isCalculated = true;
				})
				.exec();
		},
		// 点击菜单选项
		handleSelect(value) {
			this.$emit('select', value);
			// 可选：触发后自动关闭菜单（需父组件配合）
			this.$emit('update:show', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.btn_pop {
	 position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  // background-color: rgba(0, 0, 0, 0.3); // 半透明黑色
	  z-index: 998; // 层级低于菜单（999），确保菜单在上方
	  pointer-events: auto; // 允许点击
}
.dropdown-menu {
	position: fixed;
	z-index: 999; /* 确保在最上层 */
	will-change: transform; /* 优化渲染性能，减少闪烁 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 箭头样式（与菜单无缝衔接） */
.arrow {
	width: 0;
	height: 0;
	border-width: 8px;
	border-style: solid;
	position: absolute;
}

.arrow.down {
	border-color: transparent transparent #fff transparent;
	top: -16px; /* 与菜单顶部衔接 */
	left: 16px;
}

.arrow.up {
	border-color: #fff transparent transparent transparent;
	bottom: -16px; /* 与菜单底部衔接 */
	left: 16px;
}

/* 菜单内容样式 */
.menu-content {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	min-width: 180rpx;
	padding: 15rpx 0; /* 优化内边距 */
	box-sizing: border-box;
}

/* 菜单项样式 */
.menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12rpx 20rpx; /* 增大点击区域 */
	white-space: nowrap; /* 防止文字换行 */
	&:active {
		background-color: #f8f8f8; /* 点击反馈 */
	}

	image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.texts {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8c8c8c;
	}
}
</style>
